<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>茶语卡片 - 茶文化知识游戏</title>
    <meta name="description" content="一款关于中国茶文化的卡片知识游戏">
    <meta name="keywords" content="茶文化,茶叶,茶知识,卡片游戏,教育游戏">
    
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap');
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Noto Serif SC', serif;
            background-color: #f5f5f5;
            background-image: url('https://picsum.photos/seed/tea-garden/1600/900.jpg');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }
        
        .game-container {
            max-width: 1200px;
            width: 100%;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
            padding: 30px;
            position: relative;
            overflow: hidden;
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        h1 {
            color: #2c5f2d;
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }
        
        .game-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding: 10px 20px;
            background-color: rgba(44, 95, 45, 0.1);
            border-radius: 10px;
        }
        
        .score, .moves, .timer {
            font-size: 1.2rem;
            color: #2c5f2d;
            font-weight: bold;
        }
        
        .game-board {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .card {
            background-color: #fff;
            border-radius: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            height: 280px;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }
        
        .card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            text-align: center;
            transition: transform 0.8s;
            transform-style: preserve-3d;
        }
        
        .card.flipped .card-inner {
            transform: rotateY(180deg);
        }
        
        .card-front, .card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 15px;
        }
        
        .card-front {
            background-color: #2c5f2d;
            color: white;
        }
        
        .card-back {
            background-color: #fff;
            color: #333;
            transform: rotateY(180deg);
            border: 2px solid #2c5f2d;
        }
        
        .card-image {
            width: 100%;
            height: 150px;
            object-fit: cover;
            border-radius: 10px;
            margin-bottom: 10px;
        }
        
        .card-title {
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 10px;
            color: #2c5f2d;
        }
        
        .card-description {
            font-size: 0.9rem;
            line-height: 1.4;
            overflow-y: auto;
            max-height: 80px;
        }
        
        .card.matched {
            opacity: 0.7;
            pointer-events: none;
        }
        
        .card.matched::after {
            content: "✓";
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: #4CAF50;
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.2rem;
            font-weight: bold;
        }
        
        .controls {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
        }
        
        .btn {
            background-color: #2c5f2d;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1rem;
            font-family: inherit;
            transition: background-color 0.3s ease;
        }
        
        .btn:hover {
            background-color: #1b4d20;
        }
        
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        
        .modal-content {
            background-color: #fff;
            padding: 30px;
            border-radius: 15px;
            max-width: 500px;
            width: 90%;
            text-align: center;
        }
        
        .modal h2 {
            color: #2c5f2d;
            margin-bottom: 20px;
        }
        
        .modal p {
            margin-bottom: 20px;
            line-height: 1.6;
        }
        
        .close-modal {
            background-color: #2c5f2d;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-family: inherit;
        }
        
        .difficulty-selector {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .difficulty-btn {
            background-color: #e8f5e9;
            border: 1px solid #c8e6c9;
            padding: 8px 16px;
            border-radius: 8px;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.3s;
        }
        
        .difficulty-btn.active {
            background-color: #2c5f2d;
            color: white;
        }
        
        .difficulty-btn:hover {
            background-color: #c8e6c9;
        }
        
        .difficulty-btn.active:hover {
            background-color: #1b4d20;
        }
        
        @media (max-width: 768px) {
            .game-board {
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                gap: 15px;
            }
            
            h1 {
                font-size: 2rem;
            }
            
            .card {
                height: 220px;
            }
        }
    </style>
</head>
<body>
    <div class="game-container">
        <header>
            <h1>🍵 茶语卡片</h1>
            <p>翻转卡片，匹配茶文化知识，学习中国茶文化</p>
        </header>
        
        <div class="game-info">
            <div class="score">得分: <span id="score">0</span></div>
            <div class="moves">步数: <span id="moves">0</span></div>
            <div class="timer">时间: <span id="timer">00:00</span></div>
        </div>
        
        <div class="difficulty-selector">
            <button class="difficulty-btn active" data-level="easy">简单</button>
            <button class="difficulty-btn" data-level="medium">中等</button>
            <button class="difficulty-btn" data-level="hard">困难</button>
        </div>
        
        <div class="game-board" id="game-board">
            <!-- 卡片将通过JavaScript动态生成 -->
        </div>
        
        <div class="controls">
            <button class="btn" id="new-game">新游戏</button>
            <button class="btn" id="hint">提示</button>
        </div>
    </div>
    
    <div class="modal" id="game-over-modal">
        <div class="modal-content">
            <h2>游戏结束！</h2>
            <p>恭喜你完成了游戏！</p>
            <p>得分: <span id="final-score">0</span></p>
            <p>用时: <span id="final-time">00:00</span></p>
            <p>步数: <span id="final-moves">0</span></p>
            <button class="close-modal" id="close-modal">关闭</button>
        </div>
    </div>
    
    <div class="modal" id="info-modal">
        <div class="modal-content">
            <h2>游戏说明</h2>
            <p>翻转卡片，找到匹配的茶文化知识对。每对卡片包含一种茶叶的相关信息，匹配成功即可得分。</p>
            <p>游戏有三种难度：</p>
            <ul style="text-align: left; margin-left: 20px;">
                <li>简单：6对卡片</li>
                <li>中等：8对卡片</li>
                <li>困难：10对卡片</li>
            </ul>
            <p>尽可能用最少的步数和最短的时间完成游戏！</p>
            <button class="close-modal" id="close-info-modal">开始游戏</button>
        </div>
    </div>

    <script>
        // 茶文化数据
        const teaData = [
            {
                id: 1,
                name: "绿茶",
                image: "https://picsum.photos/seed/green-tea/300/200.jpg",
                description: "绿茶是不发酵茶，保留了茶叶的天然物质，具有清热解毒、降血脂等功效。"
            },
            {
                id: 2,
                name: "红茶",
                image: "https://picsum.photos/seed/black-tea/300/200.jpg",
                description: "红茶是全发酵茶，茶汤红艳，具有提神消疲、养胃护胃等功效。"
            },
            {
                id: 3,
                name: "乌龙茶",
                image: "https://picsum.photos/seed/oolong-tea/300/200.jpg",
                description: "乌龙茶是半发酵茶，既有绿茶的清香，又有红茶的醇厚，具有减肥美容等功效。"
            },
            {
                id: 4,
                name: "白茶",
                image: "https://picsum.photos/seed/white-tea/300/200.jpg",
                description: "白茶是微发酵茶，茶汤清淡，具有降火清热、解毒等功效。"
            },
            {
                id: 5,
                name: "黄茶",
                image: "https://picsum.photos/seed/yellow-tea/300/200.jpg",
                description: "黄茶是轻发酵茶，具有独特的闷黄工艺，具有消食化滞等功效。"
            },
            {
                id: 6,
                name: "黑茶",
                image: "https://picsum.photos/seed/dark-tea/300/200.jpg",
                description: "黑茶是后发酵茶，具有降脂减肥、助消化等功效，越陈越香。"
            },
            {
                id: 7,
                name: "普洱茶",
                image: "https://picsum.photos/seed/puer-tea/300/200.jpg",
                description: "普洱茶是云南特产，分为生普和熟普，具有降脂降压、养胃护胃等功效。"
            },
            {
                id: 8,
                name: "龙井茶",
                image: "https://picsum.photos/seed/longjing-tea/300/200.jpg",
                description: "龙井茶是中国十大名茶之一，产于杭州，具有色绿、香郁、味甘、形美等特点。"
            },
            {
                id: 9,
                name: "铁观音",
                image: "https://picsum.photos/seed/tieguanyin-tea/300/200.jpg",
                description: "铁观音是乌龙茶的代表，产于福建安溪，具有独特的兰花香和观音韵。"
            },
            {
                id: 10,
                name: "大红袍",
                image: "https://picsum.photos/seed/dahongpao-tea/300/200.jpg",
                description: "大红袍是武夷岩茶之王，具有独特的岩韵和果香，是中国十大名茶之一。"
            }
        ];
        
        // 游戏状态
        let cards = [];
        let flippedCards = [];
        let matchedPairs = 0;
        let moves = 0;
        let score = 0;
        let timer = 0;
        let timerInterval;
        let isProcessing = false;
        let difficulty = 'easy';
        
        // DOM元素
        const gameBoard = document.getElementById('game-board');
        const scoreElement = document.getElementById('score');
        const movesElement = document.getElementById('moves');
        const timerElement = document.getElementById('timer');
        const newGameBtn = document.getElementById('new-game');
        const hintBtn = document.getElementById('hint');
        const gameOverModal = document.getElementById('game-over-modal');
        const infoModal = document.getElementById('info-modal');
        const closeModalBtn = document.getElementById('close-modal');
        const closeInfoModalBtn = document.getElementById('close-info-modal');
        const difficultyBtns = document.querySelectorAll('.difficulty-btn');
        
        // 初始化游戏
        function initGame() {
            // 重置游戏状态
            cards = [];
            flippedCards = [];
            matchedPairs = 0;
            moves = 0;
            score = 0;
            timer = 0;
            isProcessing = false;
            
            // 更新显示
            scoreElement.textContent = score;
            movesElement.textContent = moves;
            timerElement.textContent = '00:00';
            
            // 清除计时器
            clearInterval(timerInterval);
            
            // 根据难度选择卡片数量
            let pairCount;
            switch(difficulty) {
                case 'medium':
                    pairCount = 8;
                    break;
                case 'hard':
                    pairCount = 10;
                    break;
                default:
                    pairCount = 6;
            }
            
            // 随机选择茶叶数据
            const selectedTeas = [...teaData].sort(() => Math.random() - 0.5).slice(0, pairCount);
            
            // 创建卡片对（每种茶创建两张卡片）
            selectedTeas.forEach(tea => {
                cards.push({...tea, pairId: tea.id});
                cards.push({...tea, pairId: tea.id});
            });
            
            // 打乱卡片顺序
            cards.sort(() => Math.random() - 0.5);
            
            // 渲染游戏板
            renderGameBoard();
            
            // 开始计时
            startTimer();
        }
        
        // 渲染游戏板
        function renderGameBoard() {
            gameBoard.innerHTML = '';
            
            cards.forEach((card, index) => {
                const cardElement = document.createElement('div');
                cardElement.className = 'card';
                cardElement.dataset.index = index;
                
                cardElement.innerHTML = `
                    <div class="card-inner">
                        <div class="card-front">
                            <div style="font-size: 3rem;">🍵</div>
                            <div>点击翻转</div>
                        </div>
                        <div class="card-back">
                            <img src="${card.image}" alt="${card.name}" class="card-image">
                            <h3 class="card-title">${card.name}</h3>
                            <p class="card-description">${card.description}</p>
                        </div>
                    </div>
                `;
                
                cardElement.addEventListener('click', () => flipCard(index));
                gameBoard.appendChild(cardElement);
            });
        }
        
        // 翻转卡片
        function flipCard(index) {
            // 如果正在处理中或已经匹配或已经翻转，则返回
            if (isProcessing || cards[index].matched || flippedCards.includes(index)) {
                return;
            }
            
            // 翻转卡片
            const cardElement = document.querySelector(`.card[data-index="${index}"]`);
            cardElement.classList.add('flipped');
            flippedCards.push(index);
            
            // 如果翻转了两张卡片
            if (flippedCards.length === 2) {
                moves++;
                movesElement.textContent = moves;
                checkMatch();
            }
        }
        
        // 检查匹配
        function checkMatch() {
            isProcessing = true;
            const [firstIndex, secondIndex] = flippedCards;
            
            // 如果两张卡片匹配
            if (cards[firstIndex].pairId === cards[secondIndex].pairId) {
                // 标记为已匹配
                cards[firstIndex].matched = true;
                cards[secondIndex].matched = true;
                
                // 添加匹配样式
                document.querySelector(`.card[data-index="${firstIndex}"]`).classList.add('matched');
                document.querySelector(`.card[data-index="${secondIndex}"]`).classList.add('matched');
                
                // 增加分数
                score += 10;
                scoreElement.textContent = score;
                
                // 增加匹配对数
                matchedPairs++;
                
                // 清空翻转的卡片数组
                flippedCards = [];
                isProcessing = false;
                
                // 检查是否游戏结束
                if (matchedPairs === cards.length / 2) {
                    endGame();
                }
            } else {
                // 如果不匹配，延迟后翻回
                setTimeout(() => {
                    document.querySelector(`.card[data-index="${firstIndex}"]`).classList.remove('flipped');
                    document.querySelector(`.card[data-index="${secondIndex}"]`).classList.remove('flipped');
                    flippedCards = [];
                    isProcessing = false;
                }, 1000);
            }
        }
        
        // 开始计时
        function startTimer() {
            timerInterval = setInterval(() => {
                timer++;
                const minutes = Math.floor(timer / 60).toString().padStart(2, '0');
                const seconds = (timer % 60).toString().padStart(2, '0');
                timerElement.textContent = `${minutes}:${seconds}`;
            }, 1000);
        }
        
        // 结束游戏
        function endGame() {
            clearInterval(timerInterval);
            
            // 计算奖励分数
            const bonusScore = Math.max(0, 100 - moves * 2 - Math.floor(timer / 10));
            score += bonusScore;
            scoreElement.textContent = score;
            
            // 显示游戏结束模态框
            document.getElementById('final-score').textContent = score;
            document.getElementById('final-time').textContent = timerElement.textContent;
            document.getElementById('final-moves').textContent = moves;
            gameOverModal.style.display = 'flex';
        }
        
        // 显示提示
        function showHint() {
            // 找到一对未匹配的卡片
            const unmatchedCards = cards.map((card, index) => ({...card, index}))
                                       .filter(card => !card.matched);
            
            if (unmatchedCards.length < 2) return;
            
            // 找到一对相同的卡片
            const firstCard = unmatchedCards[0];
            const matchingCard = unmatchedCards.find(card => card.pairId === firstCard.pairId && card.index !== firstCard.index);
            
            if (!matchingCard) return;
            
            // 短暂显示这两张卡片
            const firstCardElement = document.querySelector(`.card[data-index="${firstCard.index}"]`);
            const matchingCardElement = document.querySelector(`.card[data-index="${matchingCard.index}"]`);
            
            firstCardElement.classList.add('flipped');
            matchingCardElement.classList.add('flipped');
            
            // 扣除分数
            score = Math.max(0, score - 5);
            scoreElement.textContent = score;
            
            setTimeout(() => {
                if (!firstCard.matched) {
                    firstCardElement.classList.remove('flipped');
                }
                if (!matchingCard.matched) {
                    matchingCardElement.classList.remove('flipped');
                }
            }, 1000);
        }
        
        // 事件监听器
        newGameBtn.addEventListener('click', initGame);
        hintBtn.addEventListener('click', showHint);
        closeModalBtn.addEventListener('click', () => {
            gameOverModal.style.display = 'none';
            initGame();
        });
        closeInfoModalBtn.addEventListener('click', () => {
            infoModal.style.display = 'none';
        });
        
        // 难度选择
        difficultyBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                // 更新活动按钮
                difficultyBtns.forEach(b => b.classList.remove('active'));
                btn.classList.add('active');
                
                // 更新难度
                difficulty = btn.dataset.level;
                
                // 重新开始游戏
                initGame();
            });
        });
        
        // 初始化游戏
        window.addEventListener('load', () => {
            infoModal.style.display = 'flex';
            initGame();
        });
    </script>
</body>
</html>
